<template>
  <div>
    <div class="content_fixed">
      <p class="drawal_title">我的喵币</p>
      <h4 class="drawal_money">{{ptb}}</h4>
      <van-field v-model="amount" type="number" label="喵币" placeholder="0.0"/>
      <van-field v-model="username" label="用户名" placeholder="用户名"/>
      <p class="scale">默认比例为1:1</p>
      <van-field v-model="amount" type="number" label="到账平台币" readonly placeholder="到账平台币"/>
      <van-field v-model="amount" type="number" label="扣除喵币" readonly placeholder="0"/>
      <van-field v-show="userinfo.has_g_pwd"  v-model="password" type="password" label="支付密码" placeholder="支付密码"/>
      <div v-show="!userinfo.has_g_pwd" class="set_up">
        <span>支付密码</span>
        <van-button round color="#288dff" class="set_up_btn"  to="/change_withdrawal_password?title=payment">去设置</van-button>
      </div>
      <van-button color="#288dff" class="sure_btn" @click="onConfirm">确定</van-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getPtb } from '../../../network/home'
export default {
  props: {
    ptb: {
      type: String,
      default: '0.00'
    },
  },
  data() {
    return {
      amount: '',
      username: '',
      password: '',
    }
  },
  methods: {
    onConfirm() {
      getPtb(this.amount,this.username,this.password).then(res => {
        console.log(res);
        if(res.state === 'ok') {
          this.$toast('充值成功')
          this.$emit('amount-change')
        }else if (res.state === 'err') {
            if(res.msg === 'no_login') {
              this.$toast(res.msg)
              this.$router.replace('/login')
            }else {
              this.$toast(res.msg)
            }
          }
          this.empty()
      })
    },
    empty() {
      this.amount = ''
      this.username = ''
      this.password = ''
    }
  },
  computed: {
    ...mapState([
      'userinfo'
    ])
  },
}
</script>

<style scoped>
.drawal_title {
  padding-top: 50px;
  text-align: center;
  font-size: 36px;
  color: #333;
  font-weight: 600;
}

.drawal_money {
  text-align: center;
  padding: 50px 0;
  font-size: 50px;
  color: #333;
}

.van-field {
  font-size: 28px;
  height: 100px;
  padding: 0 40px;
  line-height: 100px;
}

.scale {
  text-align: right;
  font-size: 28px;
  color: #ff0000;
  padding: 20px 40px 20px 0;
}

.textarea_box {
  border: 1px solid #eee;
  border-radius: 20px;
  font-size: 28px;
  line-height: 36px;
  margin-top: 30px;
  padding: 30px;
  width: 690px;
  height: 250px;
  margin: 30px 30px 0;
}

.sure_btn {
  width: 670px;
  height: 88px;
  margin-top: 50px;
  border-radius: 10px;
  font-size: 28px;
  margin: 40px;
}

.set_up {
  color: #666;
  font-size: 28px;
  line-height: 100px;
  display: flex;
  align-items: center;
}

.set_up span {
  padding: 0 40px;
}

.set_up_btn {
  font-size: 26px;
}
</style>